<script setup lang='ts'>

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import{ getUserInfoService, updateUserInfoService } from '@/api/user'



interface RuleForm {
  nickname: string
  phoneNumber: string
  userType: string
  gender: string
  introduction: string
}

const formSize = ref<'default' | 'small' | 'large'>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  nickname: '',
  phoneNumber: '',
  userType: '',
  gender: '',
  introduction: '',
})

//新建对象，用于用户信息修改
const userInfoChangeModel = ref({
  nickname: '',
  gender: '',
  introduction: '',
  phoneNumber: ''
})

const rules = reactive<FormRules<RuleForm>>({
  nickname: [
    { required: true, message: 'Please input nickname', trigger: 'blur' },
    { min: 1, max: 8, message: 'Length should be 1 to 8', trigger: 'blur' },
  ],
  introduction: [
    { max: 50, message: '长度必须小于50', trigger: 'blur' }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')

      //将数据拷贝进userInfoChangeModel
      userInfoChangeModel.value.gender = ruleForm.gender
      userInfoChangeModel.value.introduction = ruleForm.introduction
      userInfoChangeModel.value.nickname = ruleForm.nickname
      userInfoChangeModel.value.phoneNumber = ruleForm.phoneNumber
      //输出看一下
      // console.log(userInfoChangeModel)

      updateUserInfo();

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))

//调用后台接口获取用户信息
const getUserInfo = async () => {

    //TODO 测试用，将token输出到控制台看看
    // console.log(localStorage.getItem('token'))
    
    let result = await getUserInfoService(localStorage.getItem('token'))

    //TODO 测试用，输出到控制台
    console.log(result.data)

    //将获取到的数据存到ruleForm
    ruleForm.nickname = result.data.nickname
    ruleForm.phoneNumber = result.data.phoneNumber
    ruleForm.userType = result.data.userType
    ruleForm.gender = result.data.gender
    ruleForm.introduction = result.data.introduction

}
getUserInfo();

//调用后端接口更新用户信息
const updateUserInfo = async () => {

  let result = await updateUserInfoService(userInfoChangeModel.value)
  console.log("更新用户信息result:" + result)
  getUserInfo();

}

</script>

<template>
   <div class="container">
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="NickName" prop="nickname">
      <el-input v-model="ruleForm.nickname" />
    </el-form-item>
    <el-form-item label="PhoneNumber" prop="phoneNumber">
      <el-input 
      disabled
      v-model="ruleForm.phoneNumber"
      placeholder="11111"
       />
    </el-form-item>
    <el-form-item label="UserType" prop="userType">
      <el-select-v2
        v-model="ruleForm.userType"
        placeholder="user"
        :options="options"
        disabled
      />
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio value="MALE">男</el-radio>
        <el-radio value="FEMALE">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Introduction" prop="introduction">
      <el-input v-model="ruleForm.introduction" type="textarea" />
    </el-form-item>
    <el-form-item>
      <!-- <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item> -->
    <!-- <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            v-model="ruleForm.date2"
            label="Pick a time"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item> -->
    <!-- <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item> -->
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        修改
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
   </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin: 10px;
  padding: 10px;
  width: 100%;
  height: 100%;
}
</style>